<template>
    <div>
        <template v-if="props.options.tabs == 1">
            <!-- 根据后台设置来判断是否展示已领取完的优惠券 -->

            <!-- 已领完样式coupon-disabled -->
            <div class="coupon" :style="{ 'margin-bottom': `${props.options.space}px` }">
                <div
                    :class="['coupon-out', item.receiveStatus == 1 ? 'coupon-disabled' : '']"
                    v-for="(item, index) in listData"
                    :key="item"
                    :style="{
                        'margin-top': index > 0 ? `10px` : '0px'
                    }">
                    <div class="coupon-left">
                        <div class="coupon-money">
                            {{ floatDivide(item.couponDiscountContent, 100) || 0
                            }}<span class="coupon-text">{{ item.couponType == 1 ? '元' : '折' }}</span>
                        </div>
                        <div class="coupon-detail">
                            <span class="coupon-name">{{ item.couponTitle }}</span>
                            <span class="coupon-type">{{ item.content }}</span>
                        </div>
                    </div>
                    <div class="coupon-right">
                        <!-- 1.已领完 2.领取已达上限 （注意只有已领完的置灰） -->
                        <div v-if="item.receiveStatus == 1 || item.receiveStatus == 2" class="coupon-other">
                            {{ item.receiveStatus == 1 ? '已领完' : '领取已达上限' }}
                        </div>
                        <div class="coupon-btn" v-else @click="jump(item)">立即领取</div>
                    </div>
                    <div class="coupon-circleTop"></div>
                    <div class="coupon-circleBottom"></div>
                    <div class="coupon-line"></div>
                </div>
                <div class="coupon-out" v-if="!listData.length && !props.isUniapp">
                    <div class="coupon-left">
                        <div class="coupon-money">20<span class="coupon-text">元</span></div>
                        <div class="coupon-detail">
                            <span class="coupon-name">优惠券展示名称</span>
                            <span class="coupon-type">无门槛，全部商品</span>
                        </div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-btn" @click="jump">立即领取</div>
                    </div>
                    <div class="coupon-circleTop"></div>
                    <div class="coupon-circleBottom"></div>
                    <div class="coupon-line"></div>
                </div>
            </div>
        </template>
        <div v-if="props.options.tabs == 2">
            <div class="couponTwo" :style="{ 'margin-bottom': `${props.options.space}px` }">
                <div
                    v-for="(item, index) in listData"
                    :class="['couponTwo-one', item.receiveStatus == 1 ? 'coupon-disabled' : '']"
                    :key="index"
                    @click="jump(item)"
                    :style="{
                        width: `calc(50% - 6px)`,
                        'margin-top': index > 1 ? `10px` : '0px',
                        'margin-right': index % 2 == 0 ? `12px` : '0px'
                    }">
                    <div class="couponTwo-top">
                        <div class="couponTwo-money">
                            {{ floatDivide(item.couponDiscountContent, 100) || 0
                            }}<span class="couponTwo-doller">{{ item.couponType == 1 ? '元' : '折' }}</span>
                        </div>
                    </div>
                    <img src="../../assets/mall/getall-two.png" class="all-img two" v-if="item.receiveStatus == 1" />
                    <div class="couponTwo-bottom">{{ item.content }}</div>
                    <div class="couponTwo-circleLeft"></div>
                    <div class="couponTwo-circleRight"></div>
                    <div class="couponTwo-line"></div>
                </div>

                <template v-if="!listData.length && !props.isUniapp">
                    <div
                        class="couponTwo-one"
                        v-for="item in 2"
                        :key="item"
                        @click="jump"
                        :style="{
                            width: `calc(50% - 6px)`
                        }">
                        <div class="couponTwo-top">
                            <div class="couponTwo-money">20<span class="couponTwo-doller">元</span></div>
                        </div>
                        <div class="couponTwo-bottom">无门槛，全部商品</div>
                        <div class="couponTwo-circleLeft"></div>
                        <div class="couponTwo-circleRight"></div>
                        <div class="couponTwo-line"></div>
                    </div>
                </template>
            </div>
        </div>
        <div v-if="props.options.tabs == 3">
            <div class="couponThree" :style="{ 'margin-bottom': `${props.options.space}px` }">
                <div
                    class="couponThree-one"
                    :class="[
                        'couponThree-one',
                        index % 3 == 0 || index % 3 == 1 ? 'couponThree-space' : '',
                        item.receiveStatus == 1 ? 'coupon-disabled' : ''
                    ]"
                    v-for="(item, index) in listData"
                    :key="item"
                    @click="jump(item)"
                    :style="{
                        'margin-top': index > 2 ? `10px` : '0px'
                    }">
                    <div class="couponThree-top">
                        <div class="couponThree-money">
                            {{ floatDivide(item.couponDiscountContent, 100) || 0
                            }}<span class="couponThree-doller">{{ item.couponType == 1 ? '元' : '折' }}</span>
                        </div>
                    </div>
                    <img
                        src="../../assets/mall/getall-three.png"
                        class="all-img three"
                        v-show="item.receiveStatus == 1" />
                    <div class="couponThree-bottom">{{ item.content }}</div>
                    <div class="couponThree-circleLeft"></div>
                    <div class="couponThree-circleRight"></div>
                    <div class="couponThree-line"></div>
                </div>
                <template v-if="listData.length % 3">
                    <div
                        v-for="item in 3 - (listData.length % 3)"
                        :key="item"
                        class="couponThree-one couponThree-null"></div>
                </template>
                <template v-if="!listData.length && !props.isUniapp">
                    <div class="couponThree-one" v-for="item in 3" :key="item">
                        <div class="couponThree-top">
                            <div class="couponThree-money">20<span class="couponThree-doller">元</span></div>
                        </div>

                        <div class="couponThree-bottom">无门槛，全部商品</div>
                        <div class="couponThree-circleLeft"></div>
                        <div class="couponThree-circleRight"></div>
                        <div class="couponThree-line"></div>
                    </div>
                </template>
            </div>
        </div>
        <div v-if="props.options.tabs == 4">
            <scroll-view
                scroll-x="true"
                @scroll="scroll"
                class="scroll-view_H"
                :style="{ 'margin-bottom': `${props.options.space}px` }">
                <div class="couponFour">
                    <div
                        v-for="item in listData"
                        :key="item"
                        @click="jump(item)"
                        :class="['couponFour-one', item.receiveStatus == 1 ? 'coupon-disabled' : '']">
                        <div class="couponFour-top">
                            <div class="couponFour-money">
                                {{ floatDivide(item.couponDiscountContent, 100) || 0
                                }}<span class="couponFour-doller">{{ item.couponType == 1 ? '元' : '折' }}</span>
                            </div>
                        </div>
                        <img
                            src="../../assets/mall/getall-scroll.png"
                            class="all-img sroll"
                            v-show="item.receiveStatus == 1" />

                        <div class="couponFour-bottom">{{ item.content }}</div>
                        <div class="couponFour-circleLeft"></div>
                        <div class="couponFour-circleRight"></div>
                        <div class="couponFour-line"></div>
                    </div>
                    <template v-if="!listData.length && !props.isUniapp">
                        <div class="couponFour-one" v-for="item in 4" :key="item">
                            <div class="couponFour-top">
                                <div class="couponFour-money">20<span class="couponFour-doller">元</span></div>
                            </div>
                            <div class="couponFour-bottom">无门槛，全部商品</div>
                            <div class="couponFour-circleLeft"></div>
                            <div class="couponFour-circleRight"></div>
                            <div class="couponFour-line"></div>
                        </div>
                    </template>
                </div>
            </scroll-view>
        </div>
    </div>
</template>
<script setup name="coupon">
import { ref, watch } from 'vue';
import { floatDivide } from '../../commons/utils.js';

const emit = defineEmits(['jump']);

let listData = ref([]);
let props = defineProps({
    options: {
        type: Object,
        default: () => {
            return {};
        }
    },
    isUniapp: {
        type: Boolean,
        default: false
    }
});
const jump = item => {
    if (props.isUniapp) {
        if (['2', '3', '4'].includes(props.options.tabs) && item.receiveStatus == 1) return;
        emit('jump', item);
    }
};
watch(
    () => props.options,
    val => {
        let param = JSON.parse(JSON.stringify(val));
        let list = param.imgList.map(item => {
            if ([3, 4].includes(item.couponStatus)) {
                // 过滤失效和过期的优惠券
                return null;
            } else if (props.options.contentList.includes(1) && item.receiveStatus == 1) {
                // 隐藏领完的优惠券
                return '';
            } else {
                return item;
            }
        });
        listData.value = list.filter(item => item);
    },
    { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.coupon-disabled {
    opacity: 0.4;
}
.all-img {
    position: absolute;
    right: 4px;
    top: 7px;
}
.two {
    width: 53px;
    height: 53px;
}
.three {
    width: 41px;
    height: 41px;
}
.sroll {
    width: 45px;
    height: 45px;
}
.coupon {
    padding: 0 14px;
    &-out {
        display: flex;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border-radius: 8px;
        height: 72px;
        background: linear-gradient(180deg, #ffabad 0%, #fe292b 100%) content-box;
    }
    &-money {
        flex-shrink: 0;
        width: 80px;
        font-size: 27px;
        text-align: center;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
    }
    &-name {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    &-detail {
        margin-left: 14px;
        padding: 18px 0;
        height: 80px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    &-type {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-circleTop {
        position: absolute;
        top: -2rpx;
        height: 8px;
        width: 16px;
        left: 242px;
        border-radius: 0 0 8px 8px;
        background-color: #f9f9f9;
    }
    &-btn {
        width: 75px;
        height: 32px;
        line-height: 32px;
        background: #ffffff;
        border-radius: 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fe292b;
        text-align: center;
    }
    &-other {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-circleBottom {
        position: absolute;
        bottom: -2rpx;
        height: 8px;
        width: 16px;
        left: 242px;
        border-radius: 8px 8px 0 0;
        background-color: #f9f9f9;
    }
    &-line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        bottom: 0;
        height: 64px;
        left: 250px;
        border-left: 1px dashed #fff;
    }
    &-left {
        width: 250px;
        display: flex;
        align-items: center;
        padding: 18px 0;
    }
    &-right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 250px);
    }
}
.couponTwo {
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    &-top {
        display: flex;
        justify-content: center;
        height: 45px;
        padding-top: 11px;
        box-sizing: border-box;
    }
    &-money {
        font-size: 25px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 27px;
        color: #ffffff;
    }
    &-doller {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-circleLeft {
        position: absolute;
        top: 36px;
        left: -2rpx;
        background-color: #f9f9f9;
        height: 18px;
        width: 9px;
        z-index: 2;
        border-radius: 0 9px 9px 0;
    }
    &-line {
        position: absolute;
        top: 45px;
        width: 100%;
        z-index: 1;
        border-top: 1px dashed #fff;
    }
    &-circleRight {
        position: absolute;
        top: 36px;
        right: -2rpx;
        z-index: 2;
        background-color: #f9f9f9;
        height: 18px;
        width: 9px;
        border-radius: 9px 0 0 9px;
    }
    &-bottom {
        padding-top: 5px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 15px;
    }
    &-one {
        flex-shrink: 0;
        width: 169px;
        height: 72px;
        position: relative;
        background: linear-gradient(180deg, #ffabad 0%, #fe292b 100%);
        border-radius: 8px;
    }
}
.couponThree {
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    &-null {
        opacity: 0;
    }
    &-space {
        margin-right: 20rpx;
    }
    &-top {
        display: flex;
        justify-content: center;
        height: 47px;
        padding-top: 10px;
        box-sizing: border-box;
    }
    &-money {
        font-size: 27px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 30px;
        color: #ffffff;
    }
    &-doller {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-circleLeft {
        position: absolute;
        top: 39px;
        left: -2rpx;
        background-color: #f9f9f9;
        height: 16px;
        width: 8px;
        z-index: 2;
        border-radius: 0 8px 8px 0;
    }
    &-line {
        position: absolute;
        top: 47px;
        width: 169px;
        width: 100%;
        z-index: 1;
        border-top: 1px dashed #fff;
    }
    &-circleRight {
        position: absolute;
        top: 39px;
        right: -2rpx;
        background-color: #f9f9f9;
        height: 16px;
        width: 8px;
        z-index: 2;
        border-radius: 8px 0 0 8px;
    }
    &-bottom {
        padding-top: 7px;
        text-align: center;
        font-size: 11px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-one {
        flex-shrink: 0;
        width: calc(33% - 14rpx);
        height: 72px;
        position: relative;
        background: linear-gradient(180deg, #ffabad 0%, #fe292b 100%);
        border-radius: 8px;
    }
}
.scroll-view_H {
    white-space: nowrap;
    width: calc(100% - 28px);
    padding: 0px 14px;
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
}
.couponFour {
    display: flex;

    &-top {
        display: flex;
        justify-content: center;
        height: 40px;
        padding-top: 10px;
        box-sizing: border-box;
    }
    &-money {
        font-size: 25px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 30px;
        color: #ffffff;
    }
    &-doller {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-circleLeft {
        position: absolute;
        top: 36px;
        left: -2rpx;
        background-color: #f9f9f9;
        height: 18px;
        width: 9px;
        z-index: 2;

        border-radius: 0 9px 9px 0;
    }
    &-line {
        position: absolute;
        top: 45px;
        width: 100%;
        z-index: 1;
        border-top: 1px dashed #fff;
    }
    &-circleRight {
        position: absolute;
        top: 36px;
        right: -2rpx;
        background-color: #f9f9f9;
        height: 18px;
        width: 9px;
        border-radius: 9px 0 0 9px;
        z-index: 2;
    }
    &-bottom {
        padding-top: 8px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
    }
    &-one {
        flex-shrink: 0;
        margin-right: 11px;
        width: 129px;
        height: 72px;
        position: relative;
        background: linear-gradient(180deg, #ffabad 0%, #fe292b 100%);
        border-radius: 8px;
    }
}
</style>
